Segmented Controls

hr.icon

セグメント化されたコントロールとは、2つ以上のセグメントが直線的に組み合わされたもので、それぞれのセグメントが相互に排他的なボタンとして機能します。

コントロール内では、すべてのセグメントの幅は同じです。

ボタンと同様に、セグメントにはテキストやイメージを含めることができます。

セグメント化されたコントロールは、異なるビューを表示するためによく使われます。

例えば、マップでは、セグメントコントロールを使って、マップ、トランジット、サテライトの各ビューを切り替えることができます。

https://gyazo.com/23db711e5ad8f26f6e6dd63eef598b58

セグメントの数を制限することで、操作性が向上します。

セグメントの幅が広い方がタップしやすい。

iPhoneでは、セグメントコントロールのセグメント数は5つ以下にします。

セグメントのコンテンツサイズを一定に保つようにします。

すべてのセグメントの幅は同じなので、一部のセグメントにコンテンツが入り、他のセグメントに入らないと見栄えが悪くなります。

セグメントコントロールでは、テキストとイメージの混在は避けてください。

個々のセグメントにはテキストや画像を含めることができますが、1つのコントロールにこの2つを混在させると、断絶した混乱したインターフェイスになります。

カスタムセグメントコントロールのコンテンツを適切に配置する。

セグメント化されたコントロールの背景の外観を変更する場合は、コンテンツが美しく表示され、位置がずれていないことを確認してください。